<template>
    <AutoPage :type="2" @getScale="getScale" title="重庆市渝中区人民法院全流程网上办案数据" :fontSize="28">
        <div class="content-box">
            <div class="left">
                <dv-border-box-8 class="boder-box">
                    <LeftModule />
                </dv-border-box-8>

            </div>
            <div class="right">

                <dv-border-box-8 class="process-system">
                    <div class="right-title">全流程相关制度</div>
                    <ProcessSystem />
                </dv-border-box-8>

                <dv-border-box-8 class="digital-trial">
                    <div class="change-btn" @click="changeShowType">查看{{ type == 1 ? '历史庭审' : '正在开庭' }}</div>
                    <div class="right-title">数字庭审公告</div>
                    <ChartSwiper v-if="type == 1" @clickItem="clickItem" />
                    <DigitalTrialCard v-if="type == 2" @clickItem="clickItemHistory" />

                </dv-border-box-8>
            </div>
        </div>
        <PopModal ref="pop" title="渝（2024）民（初）第22215号" />
        <PopModalHistory ref="popHistory" />
    </AutoPage>
</template>

<script>
import AutoPage from "@/components/AutoPage.vue";
import PopModal from './pop-modal.vue'
import PopModalHistory from './pop-modal-history.vue'
import LeftModule from './charts/left-moudle.vue'
import ChartSwiper from './charts/chart-swiper.vue'
import ProcessSystem from './charts/process-system.vue';
import DigitalTrialCard from './charts/digital-trial-card.vue'

export default {
    name: 'ReformInnovation',
    components: {
        AutoPage, PopModal, LeftModule, ProcessSystem, ChartSwiper, DigitalTrialCard, PopModalHistory
    },
    data() {
        return {
            scale: 1,
            type: 1
        }
    },
    methods: {
        getScale(e) {
            this.scale = e;
        },
        chooseMap(name) {
            console.log(name)
        },
        clickItem() {
            this.$refs.pop.dialogVisible = true
        },
        clickItemHistory() {
            this.$refs.popHistory.dialogVisible = true
        },
        changeShowType() {
            this.type = this.type == 1 ? 2 : 1
        }
    }
}
</script>

<style lang="less" scoped>
.content-box {
    flex: 1;
    width: 100%;
    display: flex;
    margin: 40px 0;

    .left {
        width: 554px;
        height: 100%;
        margin: 0 40px;
    }

    .right {
        flex: 1;
        margin: 0 40px 0 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;

        .change-btn {
            padding: 10px 20px;
            font-size: 16px;
            color: #fff;
            background: rgb(5 93 134);
            border-radius: 10px;
            position: absolute;
            right: 20px;
            top: 18px;
            cursor: pointer;
        }

        .right-title {
            height: 74px;
            display: flex;
            align-items: center;
            margin: 0px 30px;
            font-size: 30px;
            color: #23CEFD;

        }

        .process-system {
            height: 300px;
        }

        .digital-trial {
            height: 600px;
            position: relative;
        }
    }
}
</style>